<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <!-- JS -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <link href="css/my.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        $(document).ready(function() {
            $('form').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                disabled: true,
                excluded: ':disabled',
                fields: {
                    validateCode: {
                        validators: {
                            message: '验证失败',
                            notEmpty: {
                                message: '输入验证码',
                            },
                            threshold: 6,
                            remote: { //ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
                                url: 'validator16.do', //验证地址
                                message: '验证码错误', //提示消息
                                delay: 2000, //每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                                type: 'POST' //请求方式
                                /**自定义提交数据，默认值提交当前input value
                                 * 
                                 */
                                data: function(validator) {
                                    return {
                                        validateCode: $('[name="validateCode"]').val()
                                    };
                                }
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '请输入密码'
                            },
                            regexp: { /* 只需加此键值对，包含正则表达式，和提示 */
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '只能是数字和字母_.'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: '密码长度必须在6到30之间'
                            },
                            different: { //比较
                                field: 'inputmobile', //需要进行比较的input name值
                                message: '密码不能与手机号相同'
                            }
                        }
                    },
                    inputmobile: {
                        validators: {
                            notEmpty: {
                                message: '请输入手机'
                            },
                            stringLength: {
                                min: 8,
                                max: 30,
                                message: '手机长度必须在8到11之间'
                            }
                        }
                    }
                }
            });

        }); //ready

    </script>
</head>

<body>
    <div class="section my-topsection">

        <div class="container">
            <form id="changpwdform" class="my-form" role="form" data-toggle="validator" action="#">
                <div class="form-group">
                    <label for="InputMoblie">验证手机</label>
                    <input type="tel" name="inputmobile" class="form-control my-tel" id="InputMoblie" value="13676788788" required>
                </div>
                <div class="form-group" style="padding-bottom:80px;">
                    <label for="validateCodeGroup">验证码</label>
                    <div id="validateCodeGroup">
                        <div class="col-xs-6" style="padding-left:0px;">
                            <input type="number" name="validateCode" class="form-control col-xs-6" id="InputValidateCode" placeholder="------" maxlength="6" required>
                        </div>
                        <div class="col-xs-2">&nbsp;</div>
                        <a href="#" class="btn btn-success col-xs-4">验证</a>
                    </div>
                </div>
                <div class="form-group" style="padding-bottom:80px;">
                    <label for="newpassword">新密码</label>
                    <input type="password" name="password" class="form-control" id="newpassword">
                </div>
                <button id="submitBtn" type="submit" class="btn btn-primary col-xs-12">修改</button>
            </form>
        </div>
    </div>
</body>

</html>
